require(['./config'], () => {
    require(['template', 'header', 'footer', 'bootstrap', 'cookie', 'zoom', 'fly'], (template, header) => {
        class Detail {
            constructor() {
                this.getData().then(() => {
                    this.zoom()
                    this.addToShopBag()
                    this.bindEvents()
                })
                console.dir($)
            }
            getData() {
                // 取到 id,请求详情数据
                const id = window.location.search.slice(4)
                // console.log(id)
                return new Promise(resolve => {
                    $.get('http://rap2api.taobao.org/app/mock/233854/detail', { id }, resp => {
                        if (resp.code === 200) {
                            const { detail } = resp.body
                            // 由于这里的detail来自rap2，所以没有id，所以要手动加上id，但是将来上线就不需要这个操作了
                            this.detail = {
                                ...detail,
                                id
                            }
                            console.log(this.detail)
                            $('#detailList').html(template('detailListTemplate', {
                                // 根据this.detail渲染页面
                                ...this.detail
                            }))
                            // 详情数据渲染完成之后resolve
                            resolve()
                        }
                    })
                })
            }
            zoom() {
                // console.log($('.zoom_image'))
                $('.zoom_image').elevateZoom({
                    gallery: 'smallImg'
                })
            }
            addToShopBag() {
                $('#addToShopBag').on('click', e => {
                    // 开始抛物线
                    this.fly(e)
                    // 判断购物袋是否为空
                    let bag = localStorage.getItem('bag')
                    if (bag) {
                        // 购物袋不为空
                        bag = JSON.parse(bag)
                        // 判断当前商品在购物袋是否已经存在
                        const isExist = bag.some(shop => {
                            return shop.id === this.detail.id
                        })
                        if (isExist) {
                            // 当前商品已存在，只需要把当前商品num加1
                            bag = bag.map(shop => {
                                if (shop.id === this.detail.id) shop.num++
                                return shop
                            })
                        } else {
                            //第一次添加当前商品
                            bag.push({ ...this.detail, num: 1,check:true })
                        }
                        // bag.push(this.detail)
                        localStorage.setItem('bag', JSON.stringify(bag))
                        console.log(bag)
                    } else {
                        // 购物袋为空
                        // 把当前商品放入一个空数组，存进localStorage
                        // 第一次存的时候要加上数量，（也可以是input.val()）
                        localStorage.setItem('bag', JSON.stringify([{ ...this.detail, num: 1 ,check:true}]))
                    }
                })
            }
            fly(e) {
                $(`<img src="${this.detail.img[0]}" style="width:30px;height:30px;border-radius:50%" > `).fly({
                    start: {
                        left: e.pageX,  //开始位置（必填）#fly元素会被设置成position: fixed
                        top: e.pageY,  //开始位置（必填）
                    },
                    end: {
                        left: $('.shopbag').offset().left, //结束位置（必填）
                        top: $('.shopbag').offset().top,  //结束位置（必填）
                        width: 30, //结束时高度
                        height: 30, //结束时高度
                    },
                    speed: 1.1, //越大越快，默认1.2
                    vertex_Rtop: 50, //运动轨迹最高点top值，默认20
                    onEnd: function () {
                        header.calcBagTotalCount()
                        this.destroy()
                    } //结束回调
                });
            }
            // 下拉选择框
            bindEvents() {
                $('.dropdown-icon').on('click', () => {
                    $('.dropdown-icon').css({ 'transform': 'rotate(180deg)' })
                    $('.pull-down').show()
                    $(".pull-down li").each(function () {
                        $(this).on('click', () => {
                            $('.trig .dropdown-txt').html($(this).text())
                            $('.dropdown-icon').css({ 'transform': 'rotate(0deg)' })
                            setTimeout(function () {
                                $('.pull-down').hide()
                            }, 10)
                        })
                    })
                    $('.number').on('mouseleave', () => {
                        $('.pull-down').hide()
                        $('.dropdown-icon').css({ 'transform': 'rotate(0deg)' })
                    })
                })
            }
        }
        new Detail()
    })
})